<template>
    <view class="goods-list">
        <view class="header">
            <view class="search-box">
                <u-search placeholder="输入关键词搜索" @confirm="onSearch"></u-search>
            </view>
        </view>
        <view class="buttons">
            <u-button type="primary" @click="createGroupBuy">创建团购</u-button>
            <u-button type="default" @click="openDraftBox">草稿箱</u-button>
        </view>

        <view class="tabs">
            <!-- <u-tabs :value="activeTab" @change="onChange">
          <u-tab title="全部" name="all"></u-tab>
          <u-tab title="待提交" name="pending"></u-tab>
          <u-tab title="审核中" name="reviewing"></u-tab>
          <u-tab title="审核通过" name="approved"></u-tab>
          <u-tab title="审核失败" name="rejected"></u-tab>
        </u-tabs> -->
        </view>

        <view class="tab-content">
            <view v-if="activeTab === 'all'">
                <view class="goods-item" v-for="(item, index) in goods" :key="index">
                    <view class="goods-item-content">
                        <image :src="item.image" alt="商品图片" mode="aspectFill"></image>
                        <view class="goods-info">
                            <view class="title">{{ item.title }}</view>
                            <view class="status">{{ item.status }}</view>
                            <view class="price">￥{{ item.price }}</view>
                            <view class="date">{{ item.date }}</view>
                        </view>

                    </view>
                    <view class="actions">
                        <u-button type="warning" size="mini" @click="handleAction(item, '下架')">下架</u-button>
                        <u-button type="success" size="mini" @click="handleAction(item, '编辑')">编辑</u-button>
                        <u-button type="info" size="mini" @click="handleAction(item, '置顶')">置顶</u-button>
                        <u-button type="error" size="mini" @click="handleAction(item, '删除')">删除</u-button>
                        <u-button type="primary" size="mini" @click="handleAction(item, '设置CPS')">设置CPS</u-button>
                        <u-button type="warning" size="mini" @click="handleAction(item, '同步抖音')">同步抖音</u-button>
                    </view>
                </view>
            </view>
            <!-- 其他 tab 内容 -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'all',
            goods: [
                {
                    image: '/static/image.png',
                    title: '农家乐回锅肉双人份',
                    status: '审核通过',
                    price: 48.00,
                    date: '2024-11-04 10:30:89'
                },
                {
                    image: '/static/image1.png',
                    title: '金龙鱼 食用油 非转基因 金标 黄...',
                    status: '审核通过',
                    price: 199.00,
                    date: '2024-11-04 10:30:89'
                }
            ]
        };
    },
    methods: {
        onSearch(value) {
            console.log('搜索关键词:', value);
        },
        createGroupBuy() {
            console.log('创建团购');
        },
        openDraftBox() {
            console.log('打开草稿箱');
        },
        onChange(tabName) {
            this.activeTab = tabName;
        },
        handleAction(item, action) {
            console.log(`对商品 ${item.title} 执行操作: ${action}`);
        }
    }
};
</script>

<style scoped>
.goods-list {
    padding: 20upx;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20upx;
}

.search-box {
    flex: 1;
}

.buttons {
    display: flex;
    gap: 20upx;
}

.tabs {
    margin-bottom: 20upx;
}

.goods-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20upx;
}

.goods-item-content {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10upx;
}

.goods-item image {
    width: 200upx;
    height: 200upx;
    border-radius: 10upx;
    margin-right: 20upx;
}

.goods-info {
    flex: 1;
}

.title {
    font-size: 36upx;
    margin-bottom: 10upx;
}

.status {
    color: #666;
    margin-bottom: 10upx;
}

.price {
    color: #f60;
    margin-bottom: 10upx;
}

.date {
    color: #999;
    margin-bottom: 10upx;
}

.actions {
    width: 100%;
    flex-shrink: 1;
    align-content: end;
    display: flex;
    gap: 10upx;
}
</style>